import React, { Component } from 'react';
import ACTIONS from '../../redux/actions';
import { connect } from 'react-redux';

class OperationButtonn extends Component {
    state = {  } 

    ClickHandle = (operation) => {
        if (operation === "Del") this.props.sub_digit();
        else if (operation === "+") this.props.operation_handle("+");
        else if (operation === "-") this.props.operation_handle("-");
        else if (operation === "×") this.props.operation_handle("×");
        else if (operation === "÷") this.props.operation_handle("÷");
        else if (operation === "x²") this.props.operation_handle("x²");
        else if (operation === "+/-") this.props.operation_handle("+/-");
        else if (operation === "=") this.props.evaluate();
        else this.props.clear();
        // console.log(operation);

    }

    render() { 
        return (<button onClick={() => this.ClickHandle(this.props.operation)}>
            {this.props.operation}
        </button>);
    }
}

const mapDispatchToProps = {
    sub_digit: () => {
        return {
            type: ACTIONS.SUB_DIGIT
        }
    },
    operation_handle: (operation) => {
        return {
            type: ACTIONS.OPERATION,
            operation
        }
    },
    clear: () => {
        return {
            type: ACTIONS.CLEAR,
        }
    },
    evaluate: () => {
        return {
            type: ACTIONS.EVALUATE,
        }
    },
}
 
export default connect(null, mapDispatchToProps)(OperationButtonn);